<template>
  <a-avatar :style="{ backgroundColor: '#3370ff' }" :size="36">
    <a-dropdown class="iconUser">
      <IconUser class="iconUser-iconuserpl" />
      <template #content>
        <a-doption>
          <div class="iconUser-iconuserpl-popm">
            <div class="iconUser-iconuserpl-popm-zoom">张PM2.5</div>
            <a-progress :steps="5" status="warning" :percent="1" />
          </div>
        </a-doption>
        <a-doption>个人信息</a-doption>
        <a-doption @click="exitLogin">退出登入</a-doption>
      </template>
    </a-dropdown>
  </a-avatar>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import { IconUser } from '@arco-design/web-vue/es/icon';
import importComfig from './iconUserPom';
export default {
  components: {
    IconUser,
  },
  setup() {
    const { base, init, exitLogin } = importComfig();
    init();
    return {
      ...toRefs(base),
      init,
      exitLogin,
    };
  },
};
</script>

<style lang="less" scoped>
.iconUser {
  &-iconuserpl {
    cursor: pointer;
    &-popm {
      &-zoom {
        font-size: 24px;
      }
    }
  }
}
</style>
./iconUserPom
